<template>
  <div>
    <div v-show="viewIndex == 0">
      <div align="center" style="width: 100px">
        <div>
          <el-image
            style="width: 80px; height: 80px; border: solid 1px #808080; border-radius: 40px;"
            :fit="fill"
            :src="user.userIcon"
          ></el-image>
        </div>
        <div>
          <el-upload
            :on-success="onSuccess"
            :on-error="onError"
            :before-upload="beforeUpload"
            :action="iconUploadUrl"
            :with-credentials="true"
          >
            <el-button type="primary">上传头像</el-button>
          </el-upload>
        </div>
      </div>
      <br />

      <span class="tip">用户ID：</span>
      <span class="content">{{user.userId}}</span>
      <br />
      <br />

      <span class="tip">用户名：</span>
      <span class="content">{{user.userName}}</span>
      <br />
      <br />

      <span class="tip">手机号码：</span>
      <span class="content">{{user.phoneNumber}}</span>
      <br />
      <br />

      <span class="tip">用户类型：</span>
      <span class="content">{{user.userType}}</span>
      <br />
      <br />

      <span class="tip">用户积分：</span>
      <span class="content">{{user.points}}</span>
      <br />
      <br />

      <!-- <span class="tip">邮箱：</span> -->
      <el-form :model="user" :rules="rules" ref="user" class="tip">
        <el-form-item prop="email" label="邮箱：">
          <el-input class="content" v-model="user.email" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <!-- <br />
      <br />-->

      <span class="tip">密码：</span>
      <el-button type="warning" @click="setView(1)">修改密码</el-button>
      <br />
      <br />

      <el-button type="primary" @click="updateInfo()">保存信息</el-button>

      <!-- <br />
      <el-button type="danger" @click="debug()">debug</el-button>-->
    </div>

    <div v-show="viewIndex == 1">
      <el-form :rules="rules" :model="password" ref="password" class="tip">
        <el-form-item prop="oldPassword" label="旧密码：">
          <el-input
            type="password"
            class="content"
            v-model="password.oldPassword"
            style="width: 300px"
          ></el-input>
        </el-form-item>

        <el-form-item prop="newPassword" label="新密码：">
          <el-input
            type="password"
            class="content"
            v-model="password.newPassword"
            style="width: 300px"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-button type="primary" plain @click="setView(0)">取消</el-button>
      <el-button type="primary" @click="updatePassword()">修改</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Info",
  data() {
    return {
      user: {
        userIcon: "",
        userId: "",
        userName: "",
        phoneNumber: "",
        userType: "",
        points: "",
        email: "",
      },

      password: {
        oldPassword: "",
        newPassword: "",
      },

      iconUploadUrl: process.env.URL_HEAD + "/touser/user/page/save/icon",
      viewIndex: 0,

      rules: {
        email: [
          { pattern: /^(\w)+@(\S)+$/, message: "非法邮箱", trigger: "blur" },
        ],
        oldPassword: [{ required: true, message: "请输入", trigger: "blur" }],
        newPassword: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  methods: {
    init(user) {
      // console.log(user);
      this.user = user;
    },
    setView(idx) {
      this.viewIndex = idx;

      if (idx == "0") {
        this.password.oldPassword = "";
        this.password.newPassword = "";
      }
    },
    beforeUpload(file) {
      var flag = true;

      if (file.size > 1024 * 1024 * 2) {
        this.$message.error("文件不能大于2MB");
        flag = false;
      }

      if (
        !(
          file.type === "image/jpeg" ||
          file.type === "image/png" ||
          file.type === "image/gif"
        )
      ) {
        this.$message.error("只接受：jpg/png/gif");
        flag = false;
      }

      // console.log(file);

      return flag;
    },
    onSuccess(res, file) {
      location.reload();
    },
    onError(res, file) {
      this.$message.error("上传失败");
    },
    updateInfo() {
      this.$refs["user"].validate((valid) => {
        if (valid) {
          var url = process.env.URL_HEAD + "/touser/user/page/update/info";

          this.$http
            .get(url, {
              params: { name: "email", value: this.user.email },
              withCredentials: true,
            })
            .then(
              (response) => {
                if (response.data.status == "ok") {
                  this.$message.success("保存成功！");
                } else {
                  this.$message.error("保存失败");
                }
              },
              (response) => {
                this.$message.error("系统异常，请重试");
              }
            );
        } else {
          this.$message.error("请正确输入");
        }
      });
    },
    updatePassword() {
      // console.log(this.password.oldPassword);
      // console.log(this.password.newPassword);
      this.$refs["password"].validate((valid) => {
        if (valid) {
          var url = process.env.URL_HEAD + "/touser/user/page/update/info";

          this.$http
            .get(url, {
              params: {
                password: this.password.oldPassword,
                name: "password",
                value: this.password.newPassword,
              },
              withCredentials: true,
            })
            .then(
              (response) => {
                if (response.data.status == "ok") {
                  this.setView(0);

                  this.$message.success("修改成功！");
                } else {
                  this.$message.error("修改失败 " + "密码错误");
                }
              },
              (response) => {
                this.$message.error("系统异常，请重试");
              }
            );
        } else {
          this.$message.error("请完整输入");
        }
      });
    },
    sleep(numberMillis) {
      var now = new Date();
      var exitTime = now.getTime() + numberMillis;
      while (true) {
        now = new Date();
        if (now.getTime() > exitTime) return;
      }
    },
    debug() {},
  },
  created: function () {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-input {
  width: 200px;
}

.tip {
  font-size: 16px;
}

.content {
  font-size: 16px;
}
</style>
